<template>
	<switch-patient></switch-patient>
	<view class="info">
		<view>
			<text class="title">就诊科室</text>
			<text>{{waitData?waitData.address:'无'}}</text>
		</view>
		<view>
			<text class="title">医&emsp;&emsp;生</text>
			<text>{{waitData?waitData.doctorName:'无'}}</text>
		</view>
		<view>
			<text class="title">我的序号</text>
			<text>{{waitData?waitData.personNum:'无'}}</text>
		</view>
	</view>
	<view class="person-num">
		<text class="text">前方排队人数</text>
		<text class="num">{{waitData?waitData.num:'无'}}</text>
	</view>
	<view @click="updateWait" class="update"><text>更新</text></view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import {
		onBeforeMount,
		ref
	} from 'vue'
	import {
		getWaitingInfo
	} from '@/api/personApi.js'
	const waitData = ref({})
	onBeforeMount(async () => {
		const {
			data
		} = await getWaitingInfo()
		if (data.code === 0) {
			waitData.value = data.data[0]
		}
	})
	const updateWait = () => {

	}
</script>

<style lang="less" scoped>
	.info {
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		padding: 0 32rpx;

		view {
			border-bottom: 1px solid #f5f5f5;
			height: 110rpx;
			line-height: 110rpx;

			.title {
				color: #c7c1c0;
				margin-right: 32rpx;
			}
		}
	}

	.person-num {
		margin: 56rpx auto 100rpx auto;
		width: 320rpx;
		height: 320rpx;
		background: #fd9233;
		border-radius: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;

		.text {
			font-size: 28rpx;
		}

		.num {
			font-size: 64rpx;
		}
	}

	.update {
		width: 688rpx;
		height: 80rpx;
		background: #006eff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		border-radius: 10rpx;
		color: #fff;
		font-size: 36rpx;
	}
</style>
